<template>
  <div>
    <el-form :model="editData" ref="form" :rules="rules" label-width="140px">
      <el-form-item label="批次号：">
        <el-input disabled class="form-control-ml" v-model="editData.batch_no"></el-input>
      </el-form-item>
      <el-form-item label="项目数量：">
        <el-input disabled class="form-control-ml" v-model="editData.project_amount"></el-input>
      </el-form-item>
      <el-form-item label="银行名称：">
        <el-input disabled class="form-control-ml" v-model="editData.bank_name"></el-input>
      </el-form-item>
      <el-form-item label="银行名称：">
        <el-input disabled class="form-control-ml" v-model="editData.bank_name"></el-input>
      </el-form-item>
      <el-form-item label="授信金额：">
        <el-input disabled class="form-control-ml" v-model="editData.project_funds">
          <span slot="append">万元</span>
        </el-input>
      </el-form-item>
      <el-form-item label="支用金额：">
        <el-input disabled class="form-control-ml" v-model="editData.cur_use_funds_total">
          <span slot="append">万元</span>
        </el-input>
      </el-form-item>
      <el-form-item label="担保费率">
        <el-input disabled class="form-control-ml" v-model="editData.gua_rate">
          <span slot="append">%</span>
        </el-input>
      </el-form-item>
      <el-form-item label="担保费">
        <el-input disabled class="form-control-ml" v-model="editData.gua_fee">
          <span slot="append">元</span>
        </el-input>
      </el-form-item>
      <el-form-item label="银行分险比列：" prop="risk_rate">
        <el-input class="form-control-ml" v-model="editData.risk_rate">
          <span slot="append">%</span>
        </el-input>
      </el-form-item>
      <el-form-item label="联担分险比列：" prop="join_risk_rate">
        <el-input class="form-control-ml" v-model="editData.join_risk_rate">
          <span slot="append">%</span>
        </el-input>
        <div class="text-muted small" v-show="editData.risk_rate">
          我公司承担共同担保责任{{ unionRisk }}%风险责任中的
          <span v-if="editData.join_risk_rate">{{ editData.join_risk_rate }}%</span>
          <span v-else class="text-danger small">请输入联担分险比例</span>
          ，即为总风险责任的{{ riskTotal }}%
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="handlePass" :loading="submitLoading" class="btn-long" type="primary">
          通过
        </el-button>
        <el-button @click="handleRefuse" :loading="submitLoading" class="btn-long" type="danger">
          拒绝
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { sub } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'
export default {
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      editData: {},
      rules: {
        risk_rate: [{ required: true, message: '请输入银行分险比列', trigger: 'blur' }],
        join_risk_rate: [{ required: true, message: '请输入联担分险比列', trigger: 'blur' }],
      },
      tableName: 'customer_related_quick_batch',
      submitLoading: false,
    }
  },
  watch: {
    formData: {
      handler: function () {
        this.editData = { ...this.formData }
        this.editData.risk_rate = 20
        this.editData.join_risk_rate = +this.formData.join_risk_rate || 50
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    ...mapGetters(['user']),
    quickId() {
      return this.formData.customer_related_quick_batch_id
    },
    riskTotal() {
      return Math.round(this.editData.join_risk_rate * this.unionRisk * 100) / 10000
    },
    unionRisk() {
      return sub(100, this.editData.risk_rate)
    },
  },
  created() {},
  methods: {
    handlePass() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitData(1)
        } else {
          this.$message.error('请完善信息')
        }
      })
    },
    submitData(status, confuse = '') {
      const data = {
        risk_rate: this.editData.risk_rate,
        join_risk_rate: this.editData.join_risk_rate,
        item_status: status,
        item_time: this.$utils.dateFormat(new Date()),
        confuse_person: status === 2 ? this.user.realName : '',
        confuse_des: confuse,
        confuse_time: this.$utils.dateFormat(new Date()),
      }
      if (!this.quickId) {
        return this.$message.warning('立项失败，请重试！')
      }
      this.updateData(data)
    },
    updateData(data) {
      this.submitLoading = true
      return this.$api
        .updateData(this.$serviceName, this.tableName, this.quickId, data)
        .then(() => {
          this.$message.success('操作成功')
          this.$emit('success', true)
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || `操作失败，请重试！`)
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    handleRefuse() {
      this.$prompt('请输入拒绝理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: value => (!value ? '请输入不通过原因' : true),
      })
        .then(({ value }) => {
          this.submitData(2, value)
            .then(() => {
              this.$message.success('操作成功！')
              this.$emit('success', true)
            })
            .catch(() => this.$message.error('操作失败，请重试！'))
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped></style>
